/* eslint-disable */
import React from 'react';
import { Tabs, Radio } from 'antd';
import Container from 'components/Container';
import Button from 'components/BtnComponent';
import Input from 'components/Input';

import renderOptionInput from './Input';

const { TabPane } = Tabs;

const renderBranchItem = ({ id }) => {
  const basic = [
    // {
    //   name: '名称',
    //   labelRequired: true,
    //   formInputName: `${type}Name`,
    // },
    // {
    //   name: '表达式',
    //   labelRequired: true,
    //   formInputName: `${type}Express`,
    // },
    {
      name: '变量是否为真',
      labelRequired: true,
      formInputName: 'Express',
      rules: [{ required: true, message: '请填写此项信息' }],
    },
  ];

  return (
    <Container style={{
      background: '#181C25',
      padding: '12px 0 1px 0',
      marginBottom: '12px',
    }}
    >
      {basic.map(item => renderOptionInput(item, `${id}${item.formInputName}`))}
    </Container>
  );
};

const renderBranch = (id) => {
  console.log();
  return (
    <Container style={{ padding: '0 12px' }}>
      {renderBranchItem({ id })}
      {/* {renderBranchItem({ id, type: 'no' })} */}
    </Container>
  );
};

const renderConfig = (id) => {
  const controlList = [
    {
      name: '遍历集合',
      formInputName: 'name',
    },
    {
      name: '遍历元素变量',
      formInputName: 'ip',
    },
    {
      name: '循环结束条件',
      formInputName: 'ip',
    },
  ];
  return (
    <Container>
      <Container>
        <span style={{ fontSize: '13px', marginLeft: '16px', color: '#E7EFFF' }}>
          失效时处理
        </span>
        <Radio.Group defaultValue={0} style={{ padding: '0 12px' }}>
          <Radio value={0}>终止执行剧本</Radio>
          <Radio value={1}>继续执行剧本</Radio>
        </Radio.Group>
      </Container>
      <Container>
        <span style={{ fontSize: '13px', marginLeft: '16px', color: '#E7EFFF' }}>
          等待完成节点数
        </span>
        <Input
          name="nodeNumber"
        // isTextArea={item.isTextArea}
        // rules={item.rules}
        // disabled={item.disabled}
        // className={item.isTextArea ? classnames(styles.input, styles.textArea) : styles.input}
        // onChange={item.onChange}
        // style={{ height: item.rules && 'auto' }}
        />
      </Container>
      <Container style={{ padding: '0 12px' }}>
        <span style={{ fontSize: '13px', color: '#E7EFFF' }}>
          循环控制
        </span>
        <Container style={{
          background: '#181C25',
          padding: '12px 0',
        }}
        >
          <span style={{ fontSize: '13px', margin: '0 16px', color: '#E7EFFF' }}>
            是否启用
          </span>
          <Radio.Group defaultValue={0}>
            <Radio value={0}>是</Radio>
            <Radio value={1}>否</Radio>
          </Radio.Group>
          {controlList.map(item => renderOptionInput(item, `${id}${item.formInputName}`))}
        </Container>
      </Container>
    </Container>
  );
};

const SwitchAction = ({
  id,
  // scriptList,
  formRef,
  submit,
  onClose,
}) => {
  React.useEffect(() => {
    const res = formRef.current.getFieldValue();

    if (!res[`${id}errorStop`]) {
      formRef.current.setFieldsValue({
        [`${id}errorStop`]: 0,
      });
    }
  }, [id]);

  const basic = [
    {
      name: '节点名称',
      labelRequired: true,
      formInputName: 'nick',
      disabled: true,
      initialValue: '分支判断',
    },
    // {
    //   name: '节点ID',
    //   labelRequired: true,
    //   formInputName: 'id',
    // },
    {
      name: '节点描述',
      formInputName: 'description',
    },
  ];

  const renderFooter = () => (
    <Container flex justify="flex-end" style={{ padding: '0 12px 12px 0' }}>
      <Button type="gray" style={{ marginRight: '12px' }} onClick={onClose}>取消</Button>
      <Button onClick={() => { submit({}); }}>确定</Button>
    </Container>
  );

  return (
    <div>
      <div style={{ borderBottom: '1px solid #181C25' }}>
        {basic.map(item => renderOptionInput(item, `${id}${item.formInputName}`))}
      </div>
      <div>
        <Tabs tabBarStyle={{
          height: 34,
          fontSize: 12,
          paddingLeft: 12,
          paddingRight: 12,
        }}
        >
          <TabPane tab="分支内容" key="input">
            {renderBranch(id)}
          </TabPane>
          {/* <TabPane tab="高级" key="config">
            {renderConfig(id)}
          </TabPane> */}
        </Tabs>
      </div>
      {renderFooter()}
    </div>
  );
};

export default SwitchAction;
